<template>
	<view>
		<navbar></navbar>
		<view class="container" v-if="detail.goods_id">
			<view class="header">
				<view class="media-box" @click="drawDown">
					<swiper
						v-if="detail.image.length>1&&detail.real_goods_list[0].goods_image.split('.').pop().toLowerCase() !== 'glb'"
						autoplay @change="setCurrent" class="swiper" :duration="duration" :interval="interval"
						:circular="true">
						<swiper-item @tap.stop.prevent="onPreviewImages" :data-index="index"
							v-for="(item, index) in detail.image" :key="index">
							<!-- <threed-image v-if="canIUse3D" :img-url="item.file_path"></threed-image> -->
							<!-- <view v-if="detail.real_goods_list[index].goods_image.split('.').pop().toLowerCase() == 'glb'">
								<three :src="item.file_path"></three>
							</view> -->
							<image class="slide-image" mode="aspectFill" :src="item.file_path||item.file_url"></image>
						</swiper-item>
					</swiper>
					<template v-else>
						<!-- <threed-image v-if="canIUse3D" :img-url="detail.image[0].file_path"></threed-image> -->
						<!-- <threed-image v-if="canIUse3D" :img-url="detail.image[0].file_url"></threed-image> -->
						<!-- <view v-if="detail.goods_image.split('.').pop().toLowerCase() == 'glb'">
						<three :src="detail.real_goods_list[0].goods_image"></three>
					</view> -->
						<view class="swiper">
							<image class="slide-image" mode="aspectFill"
								:src="detail.image[0].file_url||detail.image[0].file_path"></image>
						</view>
					</template>
				</view>
				<!-- 底盘 -->
				<view v-if="false" class="booth">
					<!-- <view class="goods__share">
						<form @submit="onClickShare">
							<button formType="submit" class="btn-normal dis-flex flex-center">
								<text class="share__icon dy-iconfont icon-share col-f"></text>
							</button>
						</form>
					</view> -->
					<view class="goods__share">
						<form @submit="onClickPreview">
							<button formType="submit" class="btn-normal dis-flex flex-center">
								<text class="share__icon dy-iconfont icon-fangda1 col-f"></text>
							</button>
						</form>
					</view>
					<!-- 藏品名称 -->
					<view class="m-top40 goods-title dis-flex flex-center">
						<image class="flex-fixed" style="width: 100rpx;height: 50rpx;"
							src="https://qiniu.wiod.cn/alc/left5.png" mode="">
						</image>
						<text class="title col-f f-30 f-bold onelist-hidden--s">{{ detail.goods_name }}</text>
						<image class="flex-fixed" style="width: 100rpx;height: 50rpx;"
							src="https://qiniu.wiod.cn/alc/right5.png" mode="">
						</image>
					</view>
					<!-- <view class="m-top40 f-26 dis-flex flex-center">
						<text class="flex-fixed col-9">发行方</text>
						<text class="m-left20 col-f">{{ detail.publisher_name }}</text>
					</view> -->
				</view>
			</view>
			<view class="content b-f">
				<!-- 藏品标题信息 -->
				<view class="title-box">
					<view class="top">
						<view class="price">
							￥<span>{{ goods_price }}</span>
						</view>
					</view>
					<view class="bottom">
						<view class="title">
							{{ detail.goods_name}}
						</view>
						<view></view>
						<view class="tag-box">
							<span class="tag-title">限量</span>
							<span class="tag-num">{{detail.show_total_stock_num}}</span>
						</view>
					</view>
				</view>
				<!-- 发行方 持有者 -->
				<view class="content-component">
					<view class="introduction">
						<view class="introduction-item">
							<view class="title">发行方</view>
							<view class="info">
								<image class="info-img" :src="detail.publisher.logo"></image>
								<view class="info-name">{{detail.publisher.name}}</view>
							</view>
						</view>
						<view v-if="false" class="introduction-item">
							<view class="title">持有者</view>
							<view>
								<image class="info-img" src=""></image>
								<view class="info-name"></view>
							</view>
						</view>
					</view>
				</view>
				<!-- 活动介绍，富文本 -->
				<view class="content-component" v-if="article_nft_intro">
					<view class="component-title">活动介绍</view>
					<view class="component-content dy-lineheight">
						<mp-html :content="article_nft_intro"></mp-html>
					</view>
				</view>
				<!-- 藏品描述，富文本 -->
				<view class="content-component" v-if="article_content">
					<view class="component-title">藏品描述</view>
					<view class="component-content dy-lineheight">
						<mp-html :content="article_content"></mp-html>
					</view>
				</view>
				<!-- 藏品信息，抓取藏品相关信息 -->
				<view class="content-component">
					<view class="component-title">藏品信息</view>
					<view class="component-content">
						<view class="goods-spec dy-lineheight">
							<view class="content-key">藏品ID/哈希</view>
							<view class="content-value">购买后生成</view>
						</view>
						<view class="goods-spec dy-lineheight">
							<view class="content-key">发行方</view>
							<view class="content-value">{{ detail.publisher_name }}</view>
						</view>
						<view v-if="detail.author" class="goods-spec dy-lineheight">
							<view class="content-key">原创作者</view>
							<view class="content-value">{{ detail.author }}</view>
						</view>


						<view class="goods-spec dy-lineheight">
							<view class="content-key">发行时间</view>
							<view class="content-value">{{ detail.goods_create_time }}</view>
						</view>
						<!-- <view class="goods-spec dy-lineheight">
							<view class="content-key">平台</view>
							<view class="content-value">{{ appName }}</view>
						</view> -->
						<view class="goods-spec dy-lineheight">
							<view class="content-key">技术支撑</view>
							<view class="content-value">{{ appName }}/{{ blockchain }}</view>
						</view>
					</view>
				</view>
				<!-- 发行方介绍，富文本 -->
				<!-- <view class="content-component" v-if="article_publisher_intro">
					<view class="component-title">发行方介绍</view>
					<view class="component-content dy-lineheight">
						<mp-html :content="article_publisher_intro"></mp-html>
					</view>
				</view> -->
				<!-- 规则和权益 -->
				<view v-if="detail.rules && 0 < detail.rules.length" class="content-component">
					<view class="component-title">规则和权益</view>
					<view class="component-content dy-lineheight">
						<mp-html :content="article_rules"></mp-html>
					</view>
				</view>
				<!-- NFT科普小贴士，前端写死 -->
				<view class="content-component nft-tips">
					<view class="nft-tips-title col-32 t-c f-bold">{{ nft.tips_title }}</view>
					<view class="nft__summary m-top40 dy-lineheight f-28">{{ nft.tips_content }}</view>
				</view>
			</view>
			<view class="bsn">
				<image src="https://qiniu.wiod.cn/alc%2Fd8d44d519f9c23c60a6613ac20d342a.png" mode="widthFix"></image>
			</view>
			<!-- 确认购买弹窗 -->
			<zan-popup :show="showBottomPopup" type="bottom" @close="onToggleTrade">
				<view class="popup__trade">
					<!-- 关闭按钮 -->
					<view class="trade-close dis-flex flex-x-center flex-y-center" @tap.stop.prevent="onToggleTrade">
						<text class="iconfont icon-close f-26"></text>
					</view>
					<!-- 主体信息 -->
					<view class="trade-main">
						<view class="goods-info dis-flex">
							<!-- 图片名称 -->
							<view class="goods-image" @tap.stop.prevent="onPreviewSkuImage">
								<image :src="skuCoverImage"></image>
							</view>
							<view class="right flex-box">
								<view class="goods-price">
									<text
										class="goods-price_num col-m f-32">{{ 0 == goods_price ? '免费' : '￥' + goods_price }}</text>
								</view>
								<view class="m-top10 f-28">{{ detail.goods_name }}</view>
							</view>
						</view>
						<!-- 规格列表 -->
						<view class="goods-attr">
							<!-- 滚动容器 -->
							<scroll-view class="goods-attr--scroll" :scroll-y="true">
								<view class="group-item" v-for="(attr, attr_idx) in goodsMultiSpec.spec_attr"
									:key="attr_idx">
									<view class="tips-text" :data-id="attr.group_id">藏品</view>

									<template v-if="1 == detail.lottery_status && 26 == detail.active_status">
										<!-- 抽奖，中奖的规格选中，其他规格不可点击 -->
										<view
											:class="'spec-item ' + (item.item_id == detail.zj_goods_sku_id ? 'cur' : 'disabled')"
											:data-attr-idx="attr_idx" :data-item-idx="item_idx"
											v-for="(item, item_idx) in attr.spec_items" :key="item_idx">
											{{ item.spec_value }}
										</view>
									</template>
									<template v-else>
										<view
											:class="'spec-item ' + (item.item_id == attr.checked_item_id ? 'cur' : '')"
											:data-attr-idx="attr_idx" :data-item-idx="item_idx"
											@tap.stop.prevent="onSwitchSpec" v-for="(item, item_idx) in attr.spec_items"
											:key="item_idx">
											{{ item.spec_value }}
										</view>
									</template>
								</view>
							</scroll-view>
						</view>
					</view>
					<!-- 选择规格底部操作栏 -->
					<view class="footer-fixed footer-fixed--popup f-30">
						<!-- 抽签 -->
						<view v-if="1 == detail.lottery_status"
							class="footer-fixed-container dis-flex flex-x-between flex-y-center">
							<view class="lottery-left">
								<view class="dis-flex flex-y-baseline f-bold">
									<view v-if="0 == goods_price" class="col-f f-32">免费</view>
									<view v-else class="col-f f-32">￥{{ goods_price }}<text v-if="showAtLeast"
											class="col-f f-28">起</text></view>
								</view>
							</view>
							<button class="btn-normal btn-draw" @tap.stop.prevent="advancePurchase"
								:disabled="forceDisabled">去购买</button>
						</view>
						<view v-else class="footer-fixed-container dis-flex flex-x-between flex-y-center">
							<view class="dis-flex flex-y-baseline">
								<view v-if="0 == goods_price" class="col-f f-36">免费</view>
								<block v-else>
									<view v-if="0 == goods_sku_id" class="col-f f-36">
										￥{{ goods_price }}
										<text v-if="showAtLeast" class="col-f f-28">起</text>
									</view>
									<view v-else class="col-f f-36">￥{{ goods_price }}</view>
								</block>
								<!-- <view class="goods-remain col-f f-28">剩余{{ stock_num }}份藏品</view> -->
							</view>
							<!-- 点击开始预下单 -->
							<!-- <button class="btn-normal btn-draw" :disabled="0 == stock_num || forceDisabled"
								@tap.stop.prevent="onConfirmSubmit">
								{{ 0 == goods_price ? '免费抽取' : '立即购买' }}
							</button> -->
							<button class="btn-normal btn-draw" :disabled="forceDisabled"
								@tap.stop.prevent="onConfirmSubmit">
								{{ 0 == goods_price ? '免费抽取' : '立即购买' }}
							</button>
						</view>
					</view>
				</view>
			</zan-popup>
			<!-- 底部操作栏 -->
			<bottom-placeholder></bottom-placeholder>
			<view
				v-if="0 == detail.user_login_status || 0 == detail.address_status || 1 == detail.have_no_pay_order  || (!detail.is_open_sande && !detail.is_open_lianlian)"
				class="perfect-tips-placeholder">
			</view>
			<!-- 抽签提醒模块 -->
			<view v-else>
				<draw ref="draw" :detail="detail" @submit="onSubmit"
					v-if="detail.lottery_status==1 && detail.lottery_goods_describe"></draw>
			</view>
			<view class="footer-fixed f-30">
				<!-- 登录和实名tips -->
				<view
					v-if="0 == detail.user_login_status || 0 == detail.address_status || 1 == detail.have_no_pay_order || (!detail.is_open_sande && !detail.is_open_lianlian)"
					class="perfect-tips">
					<navigator v-if="0 == detail.user_login_status" url="/pages/login/login" hover-class="none"
						class="perfect-tips-container dis-flex flex-x-between flex-y-center f-28">
						<view class="perfect-tips__title col-f"><text class="m-right10">*</text>您还未登录账号，暂无法操作</view>
						<view class="btn-perfect dis-flex flex-y-center">
							<text>去登录</text>
							<text class="dy-iconfont icon-youjiantou f-36"></text>
						</view>
					</navigator>
					<navigator v-else-if="0 == detail.address_status" url="/pages/user/address/index" hover-class="none"
						class="perfect-tips-container dis-flex flex-x-between flex-y-center f-28">
						<view class="perfect-tips__title col-f"><text class="m-right10">*</text>您还未实名认证，暂无法操作</view>
						<view class="btn-perfect dis-flex flex-y-center">
							<text>去认证</text>
							<text class="dy-iconfont icon-youjiantou f-36"></text>
						</view>
					</navigator>
					<navigator v-else-if="0 == detail.is_open_lianlian" url="" hover-class="none"
						class="perfect-tips-container dis-flex flex-x-between flex-y-center f-28">
						<view class="perfect-tips__title col-f"><text class="m-right10">*</text>您还未开户，暂无法操作</view>
						<view class="btn-perfect dis-flex flex-y-center">
							<!-- <text>去开户</text> -->
							<text class="dy-iconfont icon-youjiantou f-36"></text>
						</view>
					</navigator>
					<view v-else-if="0 == detail.address_status" @tap.stop.prevent="sande()" hover-class="none"
						class="perfect-tips-container dis-flex flex-x-between flex-y-center f-28">
						<view class="perfect-tips__title col-f"><text class="m-right10">*</text>您还未开户，暂无法操作</view>
						<view class="btn-perfect dis-flex flex-y-center">
							<text>去开户</text>
							<text class="dy-iconfont icon-youjiantou f-36"></text>
						</view>
					</view>
					<navigator v-else-if="1 == detail.have_no_pay_order" url="/pages/order/index?type=payment"
						hover-class="none" class="perfect-tips-container dis-flex flex-x-between flex-y-center f-28">
						<view class="perfect-tips__title col-f"><text class="m-right10">*</text>您当前有待付款订单，若超时将自动取消
						</view>
						<view class="btn-perfect dis-flex flex-y-center">
							<text>去付款</text>
							<text class="dy-iconfont icon-youjiantou f-36"></text>
						</view>
					</navigator>
				</view>
				<!-- 0是活动时间内不可点，1是可点，2是开始前，3是结束后 -->
				<!-- 抽签，单独处理 active_status 为20以上的场景 -->
				<template
					v-if="1 == detail.lottery_status && 20 < detail.active_status && detail.is_first == 0 && !detail.isChoosing">
					<view class="footer-fixed-container dis-flex flex-x-between flex-y-center f-28">
						<!-- active_status
							21代表抽签开始前，
							22代表抽签中(用户没报名抽签)，
							23代表用户等待抽签结果，
							24代表抽中(抢购开始前)
							25代表没抽中(抢购开始前)，
							26代表抽中(抢购中) 
							27代表没抽中(抢购中) 
						-->
						<template
							v-if="21 == detail.active_status || 25 == detail.active_status || 27 == detail.active_status">
							<view v-if="0 == goods_price" class="col-f f-36">免费</view>
							<view v-else class="col-f f-36">
								￥{{ goods_price }}
								<text v-if="showAtLeast" class="col-f f-28">起</text>
							</view>
							<button class="btn-normal btn-draw btn-countdown dis-flex flex-dir-column flex-center"
								disabled>
								<template v-if="21 == detail.active_status">
									<!-- 21：抽签未开始 -->
									<view class="f-30">点击抽签</view>
									<count-down class="count-down-class" :serverTime="detail.now_time"
										:startTime="detail.lottery_start_time" @finished="countdownFinished">
									</count-down>
								</template>
								<template v-else>
									<!-- 25：未抽中 -->
									<view class="f-30">未中签</view>
									<!-- <count-down class="count-down-class" :serverTime="detail.now_time"
										:startTime="detail.sku_start_time" @finished="countdownFinished"></count-down> -->
								</template>
							</button>
						</template>
						<template v-else>
							<template v-if="22 == detail.active_status">
								<!-- 22：抽签中(用户没报名抽签) -->
								<view class="lottery-left">
									<view class="dis-flex flex-y-baseline f-bold">
										<view v-if="0 == goods_price" class="col-f f-32">免费</view>
										<view v-else class="col-f f-32">￥{{ goods_price }}<text v-if="showAtLeast"
												class="col-f f-28">起</text>
										</view>
										<!-- <view class="lottery-user-count m-left20 col-9 f-24">已报名<text
												class="m-left10 m-right10 col-f">{{ lottery_user_num }}</text>人
										</view> -->
									</view>
									<view class="m-top10 col-9 f-22">结束倒计时：<count-down class="count-down-class"
											:serverTime="detail.now_time" :startTime="detail.lottery_end_time"
											@finished="countdownFinished">
										</count-down>
									</view>
								</view>
								<button class="btn-normal btn-draw"
									:disabled="0 == detail.user_login_status || 0 == detail.address_status || forceDisabled"
									@tap.stop.prevent="onLottery">点击抽签</button>
							</template>
							<template v-else-if="23 == detail.active_status">
								<!-- 23：用户等待抽签结果 -->
								<view class="lottery-left">
									<view class="dis-flex flex-y-baseline f-bold">
										<view v-if="0 == goods_price" class="col-f f-32">免费</view>
										<view v-else class="col-f f-32">￥{{ goods_price }}<text v-if="showAtLeast"
												class="col-f f-28">起</text>
										</view>
										<!-- <view class="lottery-user-count m-left20 col-9 f-24">已报名<text
												class="m-left10 m-right10 col-f">{{ lottery_user_num }}</text>人
										</view> -->
									</view>
									<view v-if="detail.forestall_start_time > detail.now_time"
										class="m-top10 col-9 f-22">开奖倒计时：
										<count-down class="count-down-class" :serverTime="detail.now_time"
											:startTime="detail.forestall_start_time" @finished="countdownFinished">
										</count-down>
									</view>
									<view v-else class="m-top10 col-9 f-22">开奖中</view>
								</view>
								<button v-if="detail.forestall_start_time > detail.now_time" class="btn-normal btn-draw"
									disabled>待开奖</button>
								<button v-else class="btn-normal btn-draw" disabled>开奖中</button>
							</template>
							<template v-else-if="24 == detail.active_status">
								<!-- 24：抽中(抢购开始前) -->
								<view class="lottery-left">
									<view class="dis-flex flex-y-baseline f-bold">
										<view v-if="0 == goods_price" class="col-f f-32">免费</view>
										<view v-else class="col-f f-32">￥{{ goods_price }}<text v-if="showAtLeast"
												class="col-f f-28">起</text>
										</view>
										<!-- <view class="lottery-user-count m-left20 col-9 f-24">已报名<text
												class="m-left10 m-right10 col-f">{{ lottery_user_num }}</text>人
										</view> -->
									</view>
									<view class="m-top10 col-9 f-22">购买倒计时：
										<count-down class="count-down-class" :serverTime="detail.now_time"
											:startTime="detail.forestall_start_time" @finished="countdownFinished">
										</count-down>
									</view>
								</view>
								<button class="btn-normal btn-draw" disabled>去购买</button>
							</template>
							<template v-else-if="26 == detail.active_status">
								<!-- 26：抽中(抢购中)  -->
								<view class="lottery-left">
									<view class="dis-flex flex-y-baseline f-bold">
										<view v-if="0 == goods_price" class="col-f f-32">免费</view>
										<view v-else class="col-f f-32">￥{{ goods_price }}<text v-if="showAtLeast"
												class="col-f f-28">起</text>
										</view>
									</view>
								</view>
								<!-- 如果这里是盲盒，将不再弹窗，直接到下单页面 -->
								<button v-if="1 == detail.blind_box_status" class="btn-normal btn-draw"
									@tap.stop.prevent="advancePurchase"
									:disabled="0 == detail.user_login_status || 0 == detail.address_status || forceDisabled">去购买</button>
								<button v-else class="btn-normal btn-draw" @tap.stop.prevent="onToggleTrade"
									:disabled="0 == detail.user_login_status || 0 == detail.address_status">去购买</button>
							</template>
						</template>
					</view>
				</template>
				<template v-else>
					<!-- 新人专享购买权限 显示按钮 isChoosing isNewUser-->
					<view v-if="detail.isChoosing && detail.active_status==1"
						class="footer-fixed-container dis-flex flex-x-between flex-y-center">
						<view class="dis-flex flex-y-baseline">
							<view v-if="0 == goods_price" class="col-f f-36">免费</view>
							<block v-else>
								<view v-if="0 == goods_sku_id" class="col-f f-36">
									￥{{ goods_price }}
									<text v-if="showAtLeast" class="col-f f-28">起</text>
								</view>
								<view v-else class="col-f f-36">￥{{ goods_price }}</view>
							</block>
							<view class="goods-remain col-f f-28">新人专享权益</view>
						</view>
						<!-- 非盲盒点击弹出规格弹窗 -->
						<button v-if="!detail.blind_box_status || 0 == detail.blind_box_status"
							:class="['btn-normal btn-draw',!detail.isNewUser?'gray':'']"
							@tap.stop.prevent="onToggleTrade"
							:disabled="0 == detail.active_status || 0 == detail.user_login_status || 0 == detail.address_status || (!detail.is_open_sande && !detail.is_open_lianlian)">
							{{ 0 == goods_price ? '抽取' : '立即购买' }}
						</button>
						<!-- 盲盒直接抽取 -->
						<button v-else :class="['btn-normal btn-draw',!detail.isNewUser?'gray':'']"
							@tap.stop.prevent="onDrawBlindBox"
							:disabled="0 == detail.active_status || 0 == detail.user_login_status || 0 == detail.address_status || forceDisabled || (!detail.is_open_sande && !detail.is_open_lianlian)">
							{{ 0 == goods_price ? '抽取' : '立即购买' }}
						</button>
					</view>
					<!-- 优先购买权限 显示按钮 is_first-->
					<view v-else-if="detail.is_first == 1 & 3 != detail.active_status"
						class="footer-fixed-container dis-flex flex-x-between flex-y-center">
						<view class="dis-flex flex-y-baseline">
							<view v-if="0 == goods_price" class="col-f f-36">免费</view>
							<block v-else>
								<view v-if="0 == goods_sku_id" class="col-f f-36">
									￥{{ goods_price }}
									<text v-if="showAtLeast" class="col-f f-28">起</text>
								</view>
								<view v-else class="col-f f-36">￥{{ goods_price }}</view>
							</block>
							<view class="goods-remain col-f f-28">专享优先权益</view>
						</view>
						<!-- 非盲盒点击弹出规格弹窗 -->
						<button v-if="!detail.blind_box_status || 0 == detail.blind_box_status"
							class="btn-normal btn-draw" @tap.stop.prevent="onToggleTrade"
							:disabled="0 == detail.active_status || 0 == detail.user_login_status || 0 == detail.address_status || (!detail.is_open_sande && !detail.is_open_lianlian)">
							{{ 0 == goods_price ? '抽取' : '立即购买' }}
						</button>
						<!-- 盲盒直接抽取 -->
						<button v-else class="btn-normal btn-draw" @tap.stop.prevent="onDrawBlindBox"
							:disabled="0 == detail.active_status || 0 == detail.user_login_status || 0 == detail.address_status || forceDisabled || (!detail.is_open_sande && !detail.is_open_lianlian)">
							{{ 0 == goods_price ? '抽取' : '立即购买' }}
						</button>
					</view>
					<!-- 开始前 -->
					<view v-else-if="2 == detail.active_status"
						class="footer-fixed-container dis-flex flex-x-between flex-y-center f-28">
						<view v-if="0 == goods_price" class="col-f f-36">免费</view>
						<view v-else class="col-f f-36">
							￥{{ goods_price }}
							<text v-if="showAtLeast" class="col-f f-28">起</text>
						</view>
						<button class="btn-normal btn-draw btn-countdown dis-flex flex-dir-column flex-center" disabled>
							<view class="f-30">即将开始</view>
							<count-down class="count-down-class" :serverTime="detail.now_time"
								:startTime="detail.priority_purchase_start_time||detail.sku_start_time"
								@finished="countdownFinished"></count-down>
						</button>
					</view>
					<!-- 结束后 -->
					<view v-else-if="3 == detail.active_status"
						class="footer-fixed-container dis-flex flex-x-between flex-y-center f-28">
						<view v-if="0 == goods_price" class="col-f f-36">免费</view>
						<view v-else class="col-f f-36">
							￥{{ goods_price }}
							<text v-if="showAtLeast" class="col-f f-28">起</text>
						</view>
						<button class="btn-normal btn-draw btn-countdown dis-flex flex-dir-column flex-center" disabled>
							<view class="f-30">已售罄</view>
						</button>

					</view>
					<!-- 活动中 -->
					<view v-else class="footer-fixed-container dis-flex flex-x-between flex-y-center">
						<view class="dis-flex flex-y-baseline">
							<view v-if="0 == goods_price" class="col-f f-36">免费</view>
							<block v-else>
								<view v-if="0 == goods_sku_id" class="col-f f-36">
									￥{{ goods_price }}
									<text v-if="showAtLeast" class="col-f f-28">起</text>
								</view>
								<view v-else class="col-f f-36">￥{{ goods_price }}</view>
							</block>
							<!-- <view class="goods-remain col-f f-28">剩余{{ stock_num }}份藏品</view> -->
						</view>
						<!-- 非盲盒点击弹出规格弹窗 -->
						<button v-if="!detail.blind_box_status || 0 == detail.blind_box_status"
							class="btn-normal btn-draw" @tap.stop.prevent="onToggleTrade"
							:disabled="0 == detail.active_status || 0 == detail.user_login_status || 0 == detail.address_status || (!detail.is_open_sande && !detail.is_open_lianlian)">
							{{ 0 == goods_price ? '抽取' : '立即购买' }}
						</button>
						<!-- 盲盒直接抽取 -->
						<button v-else class="btn-normal btn-draw" @tap.stop.prevent="onDrawBlindBox"
							:disabled="0 == detail.active_status || 0 == detail.user_login_status || 0 == detail.address_status || forceDisabled || (!detail.is_open_sande && !detail.is_open_lianlian)">
							{{ 0 == goods_price ? '抽取' : '立即购买' }}
						</button>
					</view>
				</template>
			</view>
		</view>
		<!-- 分享海报 -->
		<action-share-poster v-model="shareActionsheetVisible" :goods-id="goods_id"></action-share-poster>
		<!-- 购买失败海报 -->
		<fail-poster v-model="poster.show" :poster-url="poster.url" @closePopup="refreshGoodsDetail()"></fail-poster>

		<!-- <alert show="{{ poster.showAlert }}">
  <view class="poster-alert t-c">
    <view class="f-40 f-bold">您未抽中音乐人专属数字藏品</view>
    <view class="poster-alert__content col-6 f-32 dy-lineheight">请收下您的“公益足迹”，也请您继续关注公益活动！</view>
    <view class="btn-show-poster f-30 col-f" catchtap="onTogglePosterPopup">查看海报</view>
    <view class="btn-close-wrapper" catchtap="onTogglePosterAlertShow">
      <view class="btn-close">
        <text class="iconfont icon-shanchu"></text>
      </view>
    </view>
  </view>
</alert> -->
	</view>
</template>

<script>
	import JSEncrypt from '@/node_modules/encryptlong/bin/jsencrypt.js' //RSA
	import navbar from "@/components/navbar/navbar";
	import draw from "@/components/draw/index"; //滑动模块
	import zanPopup from "@/components/popup/index";
	import actionSharePoster from "@/components/poster/actionSharePoster";
	import failPoster from "@/components/poster/failPoster";
	import alert from "@/components/alert/index";
	import countDown from "@/components/count-down/index";
	import bottomPlaceholder from '@/components/bottom-placeholder/index';
	import nft from '../../ntf'; // 记录规格的数组
	import siteinfo from '@/siteinfo.js';
	import three from "@/components/three/index";
	import {
		canIUse3D
	} from '@/module.js';
	import {
		isWeixin
	} from '../../utils/verify';
	const app = getApp();
	let goodsSpecArr = []; // 记录选中的规格ID
	export default {
		components: {
			navbar,
			draw,
			zanPopup,
			actionSharePoster,
			failPoster,
			alert,
			countDown,
			bottomPlaceholder,
			three
		},
		data() {
			return {
				shareActionsheetVisible: false, //分享海报菜单
				//购买失败弹窗
				poster: {
					url: '',
					show: false
				},
				appName: siteinfo.name,
				blockchain: siteinfo.blockchain,
				interval: 3000,

				// 自动切换时间间隔
				duration: 800,

				// 滑动动画时长
				currentIndex: 1,

				// 轮播图指针
				showView: true,
				// 商品id
				goods_id: '',
				// 显示商品规格
				detail: {
					goods_id: "",
					image: [],
					goods_name: "",
					second_goods_name: "",
					publisher_name: "",
					author: "",
					goods_create_time: "",
					rules: "",
					active_status: 0,
					now_time: "",
					sku_start_time: "",
					goods_multi_spec: {
						spec_list: []
					}
				},
				//商品图
				goods_image: '',

				// 商品详情信息
				goods_price: 0,

				// 商品价格
				stock_num: 0,

				// 库存数量
				goods_sku_id: 0,

				// 规格id
				goodsMultiSpec: {
					spec_attr: []
				},

				// 多规格信息
				real_goods_id: 0,

				// 实际下单的id


				showBottomPopup: false,

				nft: nft,

				// 暴力禁用提交按钮
				forceDisabled: false,

				skuCoverImage: "",

				dealer: {
					is_dealer: ""
				},

				article_nft_intro: "",
				article_content: "",
				article_publisher_intro: "",
				article_rules: [],
				attr_idx: 0,

				attr: {
					group_id: "",
					spec_items: []
				},
				lottery_user_num: 0,
				canIUse3D: canIUse3D,
				invite_code: null, //邀请码
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(e) {
			let _this = this;

			let scene = app.getSceneData(e); // 商品id

			if (e.goods_id) {
				_this.goods_id = e.goods_id;
			} else {
				_this.goods_id = scene.gid;
			}
			if (e.invite_code) {
				_this.invite_code = e.invite_code
			}
			// TODO: delete
			// _this.goods_id = 43;
			// _this.goods_id = 272;
		},
		onShow(e) {
			// 获取商品信息
			this.getGoodsDetail();
		},
		onPullDownRefresh(e) {
			this.getGoodsDetail(() => {
				uni.stopPullDownRefresh();
			});
		},
		// 页面滚动 控制抽签模块
		onPageScroll(e) {
			if (e.scrollTop > 20 && this.$refs.draw) {
				this.$refs.draw.show = false
			}
		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			let _this = this; // 构建页面参数


			let params = app.getShareUrlParams({
				'goods_id': _this.goods_id
			});
			return {
				title: _this.detail.goods_name,
				path: "/pages/goods/index?" + params
			};
		},
		computed: {
			showAtLeast: function() {
				// 只有一个规格不显示“起”
				return 1 < this.detail.goods_multi_spec.spec_list.length;
			}
		},
		methods: {
			sande() {
				uni.navigateTo({
					url: '/pages/user/account/account'
				})
				// app._post_form('user/getSanDeWallet', {}, function(result) {
				// 	console.log(result)
				// 	if (1 == result.code) {
				// 		app.navigationTo(result.data.pay_url)
				// 	}else{
				// 		app.showError(result.msg);
				// 	}
				// }, null, function() {
				// 	// 解除按钮禁用
				// 	app.showError(result.msg);
				// });
			},
			// 关闭draw窗口
			drawDown() {
				this.$refs.draw.show = false
			},
			// 查看大图
			onClickPreview: function(e) {
				uni.showToast({
					title: '购买后可查看',
					icon: 'none'
				})
				// let _this = this
				// uni.previewImage({
				// 	current: _this.goods_image,
				// 	urls: [_this.goods_image]
				// })
			},

			/**
			 * 获取商品信息
			 */
			getGoodsDetail(callback) {
				let _this = this;

				app._get('page/detail', {
					goods_id: _this.goods_id
				}, result => {
					// 初始化商品详情数据
					let data = _this._initGoodsDetailData(result.data);
					_this.setData(data);
				}, null, () => {
					if (callback) {
						callback();
					}
				});
			},

			/**
			 * 初始化商品详情数据
			 */
			_initGoodsDetailData(goodsDetail) {
				console.log(goodsDetail)
				app.configJweixin({
					title: goodsDetail.goods_name,
					desc: '发现一款超赞的数字藏品，快来看看！',
					imgUrl: goodsDetail.goods_image
				});
				let _this = this;
				let data = {};

				try {
					// 富文本转码
					if (0 < goodsDetail.content.length) {
						_this.article_content = _this.escape2Html(goodsDetail.content);
					}

					if (0 < goodsDetail.nft_intro.length) {
						_this.article_nft_intro = _this.escape2Html(goodsDetail.nft_intro);
					}

					if (0 < goodsDetail.publisher.detail.length) {
						_this.article_publisher_intro = _this.escape2Html(goodsDetail.publisher.detail);
					}

					if (goodsDetail.rules && 0 < goodsDetail.rules.length) {
						_this.article_rules = _this.escape2Html(goodsDetail.rules);
					} // 商品价格/划线价/库存


					data.real_goods_id = goodsDetail.goods_sku.real_goods_id || 0;
				} catch (error) {
					console.log(error);
				}

				data.goods_price = goodsDetail.min_goods_price;
				data.stock_num = goodsDetail.surplus_num; // 商品封面图(确认弹窗)
				data.skuCoverImage = goodsDetail.goods_image; // 多规格商品封面图(确认弹窗)
				data.lottery_user_num = goodsDetail.lottery_user_num; // 抽奖人数

				if (goodsDetail.spec_type == 20 && goodsDetail.goods_sku['image']) {
					data.skuCoverImage = goodsDetail.goods_sku['image']['file_path'];
				} // 初始化商品多规格


				if (goodsDetail.spec_type == 20) {
					data.goodsMultiSpec = _this._initManySpecData(goodsDetail);
					data.goods_sku_id = goodsDetail.goods_multi_spec.goods_sku_id;
				}
				// goodsDetail.active_status = 26;
				data.detail = goodsDetail;
				return data;
			},

			/**
			 * 初始化商品多规格
			 */
			_initManySpecData(goodsDetail) {
				let goods_multi_spec = goodsDetail.goods_multi_spec;
				goods_multi_spec.goods_sku_id = 0;
				goodsSpecArr = [];
				let checkedItemCount = 0; // 记录默认被选中的规格数量
				goods_multi_spec.spec_attr.forEach((groupItem, index) => {
					groupItem.checked_item_id = 0; // 添加 checked_item_id 属性，使其成为响应式的
					const spec_items = groupItem.spec_items;
					const item_id = spec_items[0].item_id;
					if (1 == spec_items.length) {
						// 只有一个规格，默认选中
						// groupItem.checked_item_id = item_id;
						checkedItemCount++;
					}
					// 将每一个group的第一个规格加入数组
					goodsSpecArr[index] = item_id;
				});
				// 如果默认选中的规格数和goods_multi_spec.spec_attr数量相等，则表示都只有一个规格
				if (checkedItemCount == goodsSpecArr.length) {
					goods_multi_spec.goods_sku_id = goodsSpecArr.join('_');
				}

				// goods_multi_spec.goods_sku_id = 0;
				// goodsSpecArr = [];
				// for (let i in goods_multi_spec.spec_attr) {
				// 	const spec_items = goods_multi_spec.spec_attr[i].spec_items;

				// 	for (let j in spec_items) {
				// 		if (j < 1) {
				// 			// 如果只有一个规格，默认选中它
				// 			if (1 == spec_items.length) {
				// 				spec_items[0].checked = true;
				// 				goods_multi_spec.goods_sku_id = spec_items[0].item_id;
				// 			}

				// 			goodsSpecArr[i] = spec_items[0].item_id;
				// 		}
				// 	}
				// }

				return goods_multi_spec;
			},

			/**
			 * 点击切换不同规格，切换选中状态和记录选择的规格ID
			 */
			onSwitchSpec() {
				// console.log(e)
				let _this = this;
				// const groupIndex = e.currentTarget.dataset.attrIdx;
				// const specItemIndex = e.currentTarget.dataset.itemIdx;
				const groupIndex = 0;
				const specItemIndex = 0;
				const goodsMultiSpec = _this.goodsMultiSpec;
				const groupItem = _this.goodsMultiSpec.spec_attr[groupIndex];
				const item_id = groupItem.spec_items[specItemIndex].item_id;
				goodsSpecArr[groupIndex] = item_id;
				groupItem.checked_item_id = item_id;
				_this._updateSpecGoods();
				// let attrIdx = e.currentTarget.dataset.attrIdx;
				// let itemIdx = e.currentTarget.dataset.itemIdx;
				// let goodsMultiSpec = _this.goodsMultiSpec;

				// for (let i in goodsMultiSpec.spec_attr) {
				// 	for (let j in goodsMultiSpec.spec_attr[i].spec_items) {
				// 		if (attrIdx == i) {
				// 			goodsMultiSpec.spec_attr[i].spec_items[j].checked = false;

				// 			if (itemIdx == j) {
				// 				goodsMultiSpec.spec_attr[i].spec_items[itemIdx].checked = true;
				// 				goodsSpecArr[i] = goodsMultiSpec.spec_attr[i].spec_items[itemIdx].item_id;
				// 			}
				// 		}
				// 	}
				// }

				// _this.setData({
				// 	goodsMultiSpec
				// }); // 更新商品规格信息

				
			},

			/**
			 * 更新商品规格信息，规格信息在 goods_multi_spec.spec_list[0].form 中
			 */
			_updateSpecGoods() {
				let _this = this;
				// item_id 用 “_” 拼接起来之后，在 spec_list 中查询 spec_sku_id
				let specSkuId = goodsSpecArr.join('_');
				let spec_list = _this.goodsMultiSpec.spec_list;
				let skuItem = spec_list.find(val => {
					return val.spec_sku_id == specSkuId;
				}); // 记录goods_sku_id
				// 更新商品价格、划线价、库存

				if (typeof skuItem === 'object') {
					_this.setData({
						goods_sku_id: skuItem.spec_sku_id,
						real_goods_id: skuItem.form.real_goods_id,
						goods_price: skuItem.form.goods_price,
						stock_num: skuItem.form.stock_num,
						skuCoverImage: skuItem.form.image_id > 0 ? skuItem.form.image_path : _this.detail
							.goods_image,
						lottery_user_num: skuItem.form.lottery_user_num,
					});
				}
			},

			/**
			 * 设置轮播图当前指针 数字
			 */
			setCurrent(e) {
				let _this = this;

				_this.setData({
					currentIndex: e.detail.current + 1
				});
			},

			// 加密参数
			unCrypted(token) {
				const PUBLIC_KEY = `MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC8c4bwMErGs9id9fPwWVD3b/Ol
			miss0j6OfwKgGn3ed/Y9vsIQJNsnbvoCRCXlP+YTlFEU1gZtr6kAVDYP7Mi+v5Vb
			b3xWfvKQ5LmFTFn0AC1QZQpdmbv05EEOefQOylw9rImG7d7B1r1FK3LKD/lz56ar
			M9pvKBkzF6jc+ZfZmwIDAQAB`
				// 使用设置公私钥
				const enc = new JSEncrypt();
				enc.setPublicKey(PUBLIC_KEY);
				// enc.setPublicKey(PRIVATE_KEY);
				// token = JSON.stringify(token);
				let encrypted = enc.encryptLong(token);
				// console.log("加密后数据:%o", encrypted);
				return encrypted
			},
			/**
			 * 免费抽取
			 */
			onConfirmSubmit(e) {
				let _this = this
				try {
					if (20 == this.detail.spec_type && 0 == this.goods_sku_id) {
						app.showError('请选择藏品');
					} else {
						this.setData({
							forceDisabled: true
						});
						uni.showLoading();
						let real_goods_id = this.real_goods_id;
						let goods_sku_id = this.goods_sku_id;
						let obj = {
							goods_bigId: this.goods_id,
							goods_id: real_goods_id,
							goods_sku_id: goods_sku_id,
							wsl: this.unCrypted('123456')
						};
						// #ifndef MP
						obj.is_h5 = 1;
						// #endif
						app._post_form('order/preAddOrder', obj, res => {
							if (1 == res.code) {
								if (this.showBottomPopup) {
									this.onToggleTrade(); // 关闭弹窗	
								}

								let {
									order_type
								} = res.data;

								if (1 == order_type) {
									// 藏品
									let params = Object.assign(res.data, {
										// 大id 展示id
										show_goods_id: _this.goods_id,
										goods_id: real_goods_id,
										goods_sku_id: goods_sku_id
									});
									params.invite_code = _this.invite_code
									app.navigationTo(`pages/flow/checkout?params=${JSON.stringify(params)}`);
								} else if (2 == order_type) {
									// 海报
									let {
										poster_image_url
									} = res.data;
									let poster = {
										url: poster_image_url,
										show: true
									}

									this.setData({
										poster
									});
								}
							}
						}, null, () => {
							uni.hideLoading();
							this.setData({
								forceDisabled: false
							});
						});
					}
				} catch (error) {}
			},

			// 抽盲盒
			onDrawBlindBox: function(e) {
				let _this = this
				if (!this.detail.isChoosing || (this.detail.isChoosing && this.detail.active_status == 1 && this.detail
						.isNewUser)) {
					try {
						this.setData({
							forceDisabled: true
						});
						uni.showLoading();
						let goods_id = this.detail.blind_box_goods_id;

						let obj = {
							goods_bigId: this.goods_id,
							goods_id: goods_id,
							wsl: this.unCrypted('123456')
						};
						// #ifndef MP
						obj.is_h5 = 1;
						// #endif
						app._post_form('order/preAddOrder', obj, res => {
							if (1 == res.code) {
								let {
									order_type
								} = res.data;

								if (1 == order_type) {
									// 藏品
									let params = Object.assign(res.data, {
										// 大id 展示id
										show_goods_id: _this.goods_id,
										goods_id: goods_id,
										goods_sku_id: this.detail.blind_box_spec_sku_id,
										is_blind_box: this.detail.blind_box_status
									});
									params.invite_code = _this.invite_code
									app.navigationTo(`pages/flow/checkout?params=${JSON.stringify(params)}`);
								} else if (2 == order_type) {
									// 海报
									let {
										poster_image_url
									} = res.data;
									let poster = this.poster;
									poster.url = poster_image_url;
									poster.showPopup = true;
									this.setData({
										poster
									});
								}
							}
						}, null, () => {
							uni.hideLoading();
							this.setData({
								forceDisabled: false
							});
						});
					} catch (error) {}

				} else {
					uni.showToast({
						title: '抱歉，活动只允许新用户参与',
						icon: 'none'
					})
				}

			},

			// 抢先购/提前购
			advancePurchase: function(e) {
				let _this = this
				try {
					this.setData({
						forceDisabled: true
					});
					uni.showLoading();
					let goods_id = this.detail.zj_goods_id;
					let goods_sku_id = this.detail.zj_goods_sku_id;

					let obj = {
						goods_bigId: this.goods_id,
						goods_id: goods_id,
						goods_sku_id: goods_sku_id,
						wsl: this.unCrypted('123456')
					};
					// #ifndef MP
					obj.is_h5 = 1;
					// #endif
					app._post_form('order/preAddOrder', obj, res => {
						if (1 == res.code) {
							if (this.showBottomPopup) {
								this.onToggleTrade(); // 关闭弹窗	
							}
							let {
								order_type
							} = res.data;

							if (1 == order_type) {
								// 藏品
								let params = Object.assign(res.data, {
									// 大id 展示id
									show_goods_id: _this.goods_id,
									goods_id: goods_id,
									goods_sku_id: goods_sku_id,
								});
								params.invite_code = _this.invite_code
								app.navigationTo(`pages/flow/checkout?params=${JSON.stringify(params)}`);
							} else if (2 == order_type) {
								// 海报
								let {
									poster_image_url
								} = res.data;
								let poster = {
									url: poster_image_url,
									show: true
								}
								this.setData({
									poster
								});
							}
						}
					}, null, () => {
						uni.hideLoading();
						this.setData({
							forceDisabled: false
						});
					});
				} catch (error) {}
			},

			/**
			 * 浏览商品图片
			 */
			onPreviewImages(e) {
				let _this = this;

				let index = e.currentTarget.dataset.index;
				let imageUrls = [];;

				_this.detail.image.forEach(item => {
					imageUrls.push(item.file_path);
				});

				uni.previewImage({
					current: imageUrls[index],
					urls: imageUrls
				});
			},

			/**
			 * 预览Sku规格图片
			 */
			onPreviewSkuImage(e) {
				let _this = this;

				uni.previewImage({
					current: _this.skuCoverImage,
					urls: [_this.skuCoverImage]
				});
			},

			/**
			 * 显示分享选项
			 */
			onClickShare(e) {
				let _this = this; // 记录formId

				app.saveFormId(e.detail.formId);

				_this.setData({
					shareActionsheetVisible: true
				});
			},


			/**
			 * 确认购买弹窗
			 */
			onToggleTrade(e) {
				let _this = this;
				if (!this.detail.isChoosing || (this.detail.isChoosing && this.detail.active_status == 1 && this.detail
						.isNewUser)) {
					_this.setData({
						showBottomPopup: !_this.showBottomPopup
					});
				} else {
					uni.showToast({
						title: '抱歉，活动只允许新用户参与',
						icon: 'none'
					})
				}


			},

			// 倒计时结束
			countdownFinished: function() {
				setTimeout(() => {
					this.refreshGoodsDetail();
				}, 1000)
			},

			refreshGoodsDetail: function(callback) {
				uni.showLoading();
				this.getGoodsDetail(() => {
					uni.hideLoading();
					callback && callback();
				});
			},
			onSubmit(e) {
				console.log(e)
				if (e == 1) {
					// 返回正常立即购买
					!this.detail.blind_box_status || this.detail.blind_box_status == 0 ? this.onToggleTrade() : this
						.onDrawBlindBox()
				} else if (e == 22) {
					// 返回点击抽签
					this.onLottery()
				} else if (e == 26) {
					// 返回中签立即购买
					this.detail.blind_box_status ? this.advancePurchase() : this.onToggleTrade()
				}
			},
			// 确定抽签
			onLottery: function(e) {
				// 点击抽签后，按钮不可点击，若抽签成功，随后进入待开奖状态，按钮依旧是不可点击状态。
				this.forceDisabled = true;
				app._get('lottery/applyLottery', {
					goods_id: this.goods_id
				}, (res) => {
					app.showSuccess(res.msg, () => {
						this.refreshGoodsDetail(() => {
							this.forceDisabled = false;
						});
					});
				}, () => {
					this.forceDisabled = false;
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import '../../utils/goods-detail.scss';
	@import '../../utils/assets.scss';

	.bsn {
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
	}

	.bsn image {
		width: 200rpx;
	}

	/* 底部操作栏 */
	.footer-fixed {
		// background-color: #1c1c1c;
		height: auto;
		display: inherit;
	}

	.footer-fixed-container {
		width: 100%;
		height: 120rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.footer-fixed .btn-draw {
		flex: 1;
		min-width: 210rpx;
		max-width: 320rpx;
		height: 90rpx;
		border-radius: 10rpx;
		background: linear-gradient(270deg,#1a1a1a,#666);
		padding: 0 30rpx;
		color: #fff;
		font-size: 28rpx;
		text-align: center;
		line-height: 90rpx;
	}

	.footer-fixed .gray {
		color: #fff;
		background: linear-gradient(270deg,#1a1a1a,#666) !important;
	}

	.footer-fixed .btn-draw[disabled] {
		background: linear-gradient(270deg,#1a1a1a,#666);
    opacity: 0.3;
		color: #fff;
	}

	.btn-countdown[disabled] {
		background: linear-gradient(270deg,#1a1a1a,#666);
		font-size: 0;
		line-height: inherit;
	}

	.btn-countdown view {
		color: #fff;
	}

	.footer-fixed .goods-remain {
		position: relative;
		padding-left: 20rpx;
		margin-left: 20rpx;
	}

	.footer-fixed .goods-remain:after {
		content: '';
		width: 1px;
		height: 24rpx;
		background-color: #bbb;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.footer-fixed .goods-fixed-icon {
		width: 150rpx;
		background: #fff;
		margin: 0 auto;
		padding: 0 6rpx;
		border-left: 1rpx solid #eee;
		height: 92rpx;
		position: relative;
	}

	.footer-fixed .goods-fixed-icon:first-child {
		border-left: none;
	}

	.footer-fixed .goods-fixed-icon image {
		width: 56rpx;
		height: 56rpx;
		display: block;
		position: absolute;
		left: 0%;
		margin-left: 30rpx;
		top: 0%;
		margin-top: 17rpx;
	}

	.footer-fixed .goods-fixed-icon text {
		color: #7a7e83;
		font-size: 48rpx;
	}

	.footer-fixed .goods-fixed-icon .bargain-icon {
		height: 50rpx;
	}

	.footer-fixed .goods-fixed-icon .bargain-icon image {
		height: 50rpx;
		width: 50rpx;
		margin-top: -40rpx;
	}

	.footer-fixed .goods-fixed-icon .bargain-home {
		margin-top: 6rpx;
		text-align: center;
	}

	.footer-fixed .goods-fixed-icon .flow_num text {
		display: block;
		color: $uni-text-color-inverse;
		font-size: 22rpx;
		text-align: center;
	}

	.footer-fixed .goods-fixed-icon .icon-shoucang {
		font-size: 40rpx;
	}

	.footer-fixed .goods-fixed-icon .s_cont {
		color: #ff495e;
	}

	/* 会员价标签 */

	.tag-grade-price {
		background: linear-gradient(to right, #fa1e8c 0, #fc1e56 100%);
		background: #fc1e56;
		font-size: 22rpx;
		border-radius: 12rpx;
		color: $uni-text-color-inverse;
		padding: 4rpx 12rpx;
		margin-left: 20rpx;
	}

	/* 商品评论 */

	.goods-comment .goods-property-box {
		position: relative;
		padding: 12px;
	}

	.goods-comment .goods-property-jianTou {
		width: 52rpx;
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -13rpx;
	}

	.goods-comment .goods-property-jianTou image {
		height: 100%;
		width: 100%;
	}

	.goods-comment-box .comment_btn {
		width: 220rpx;
		margin: 0 auto;
		padding: 20rpx 0;
	}

	.goods-comment-box .comment_btn text {
		display: block;
		padding: 5rpx 0;
		color: #ff495e;
		font-size: 26rpx;
		text-align: center;
		border: 1px solid #ff495e;
		border-radius: 30rpx;
	}

	/* 商品规格 */

	.goods-attr {
		padding: 10rpx 0;
	}

	.goods-attr .goods-attr--scroll {
		min-height: 300rpx;
		max-height: 600rpx;
	}

	.goods-attr .group-item .tips-text {
		font-size: 28rpx;
		margin-bottom: 30rpx;
	}

	.goods-attr .group-item .spec-item {
		display: inline-block;
	}

	.goods-attr .group-item .spec-item {
		height: 70rpx;
		background-color: #f5f5f5;
		margin: 0 20rpx 20rpx 0;
		padding: 0 40rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		line-height: 70rpx;
		transition: background-color 0.3s;
	}

	.goods-attr .group-item .spec-item.cur {
		background:#000;
		color: #fff;
	}

	.goods-attr .group-item .spec-item.disabled {
		opacity: 0.5;
	}

	.footer-fixed .order-number {
		width: 50%;
		background: linear-gradient(to right, #fac905 0, #ff9500 100%);
		color: $uni-text-color-inverse;
		text-align: center;
		line-height: 92rpx;
	}

	.footer-fixed .order-number button {
		background: none;
		padding: 0;
		font-size: 34rpx;
		color: $uni-text-color-inverse;
		line-height: inherit;
		border-radius: 0;
		border: 0;
	}

	.footer-fixed .order-number button::after {
		content: ' ';
		width: 0;
		height: 0;
		position: absolute;
		top: 0;
		left: 0;
		border: none;
		transform: scale(0);
		transform-origin: 0 0;
		box-sizing: border-box;
		border-radius: 0;
	}

	.footer-fixed .default-btn {
		width: 100%;
		background-color: #ccc;
		color: $uni-text-color-inverse;
		text-align: center;
		line-height: 92rpx;
	}

	.footer-fixed .flow_num {
		background: #ff495e;
		position: absolute;
		right: 20rpx;
		top: 10rpx;
		border-radius: 30rpx;
		height: 30rpx;
		min-width: 30rpx;
	}

	/* 商品详情 */

	.goods-detail-box {
		font-size: 28rpx;
	}

	/* 评价次数 */

	.comment-num {
		position: absolute;
		right: 34px;
		top: 50%;
		margin-top: -20rpx;
		font-size: 28rpx;
		color: $uni-text-color;
	}

	.content-component:nth-child(n+2) {
		margin-top: 70rpx;
	}

	/* 发行放 持有者 */
	.introduction {
		.introduction-item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 336rpx;
			height: 192rpx;
			padding: 40rpx 20rpx 24rpx 30rpx;
			box-sizing: border-box;
			border-radius: 36rpx;
			border: 1px solid #ddd;

			.title {
				display: block;
				height: 30rpx;
				font-style: normal;
				font-weight: 700;
				font-size: 30rpx;
				line-height: 30rpx;
				letter-spacing: 1.17647rpx;
				color: #000;
			}

			.info {
				display: flex;
				font-size: 24rpx;
				line-height: 64rpx;

				.info-name {
					flex: 1;
					margin-left: 16rpx;
				}

				.info-img {
					width: 64rpx;
					height: 64rpx;
				}
			}
		}
	}

	.component-title {
		font-size: 32rpx;
		color: $uni-goods-content-color-comp-title;
		font-weight: bold;
	}

	.component-content {
		margin-top: 40rpx;
		padding: 30rpx;
		border-radius: 30rpx;
		border: 1rpx solid #ddd;
	}

	/* 藏品信息 */
	.goods-spec {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		border-bottom: 1rpx solid #f6f6f6;

		&:last-child {
			border: 0;
		}
	}

	/* 活动规则 */
	.rule {
		padding-left: 34rpx;
		color: #101010;
		font-size: 28rpx;
		line-height: 60rpx;
		position: relative;
	}

	.rule:before {
		content: '';
		width: 14rpx;
		height: 14rpx;
		background-color: #ccc;
		border-radius: 50%;
		position: absolute;
		top: calc((60rpx - 14rpx) * 0.5);
		left: 0;
	}

	.rule:nth-child(n + 2) {
		margin-top: 20rpx;
	}

	/* nft科普 */
	.nft-tips-title {
		position: relative;
		color: $uni-goods-content-color-comp-title;
	}

	.nft-tips-title:before,
	.nft-tips-title:after {
		content: '';
		width: 100rpx;
		height: 1rpx;
		background-color: #e5e5e5;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.nft-tips-title:before {
		left: 80rpx;
	}

	.nft-tips-title:after {
		right: 80rpx;
	}

	.nft__summary {
		color: $uni-goods-color-tips;
	}

	/* sku选择器 */

	.sku-selector {
		padding: 30rpx 20rpx;
	}

	/* 确认购买弹窗 */

	.popup__trade {
		width: 750rpx;
		position: relative;
		padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	}

	.popup__trade .trade-close {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.popup__trade .trade-main {
		background: #fff;
		box-sizing: border-box;
		padding: 50rpx 40rpx;
	}

	.popup__trade .footer-fixed {
		position: absolute;
	}

	.popup__trade .trade-main .goods-info {
		margin-bottom: 10rpx;
	}

	.popup__trade .trade-main .goods-info .goods-image {
		margin-top: -40px;
		margin-right: 40rpx;
	}

	.popup__trade .trade-main .goods-info .goods-image image {
		width: 240rpx;
		height: 240rpx;
		border-radius: 10rpx;
	}

	.popup__trade .trade-main .goods-info .money-box {
		margin: 0;
	}

	.popup__trade .trade-main .goods-info .goods-stock {
		padding-left: 10rpx;
	}

	.popup__trade .trade-main .buy_number {
		margin: 20rpx 0;
		justify-content: space-between;
	}

	.popup__trade .trade-main .buy_number .buyNumber {
		color: #888;
		background: #fff;
		border-radius: 10rpx;
		margin-bottom: 10rpx;
	}

	.content {
		background: $uni-goods-content-bg-color;
		border-radius: 40rpx 40rpx 0 0;
		padding: 100rpx 40rpx 40rpx;
		margin-top: -40rpx;
		position: relative;

		.title-box {
			border-radius: 36rpx;
			min-height: 300rpx;
			background: linear-gradient(270deg, #1a1a1a, #666);
			position: absolute;
			top: -160rpx;
			width: 670rpx;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 110rpx;
				padding: 0 20rpx 0 30rpx;

				.price {
					display: inline-block;
					font-style: normal;
					font-weight: 500;
					font-size: 40rpx;
					letter-spacing: 1.12rpx;
					color: #fff;

					span {
						font-weight: 700;
						font-size: 56rpx;
						line-height: 56rpx;
					}
				}
			}

			.bottom {
				box-sizing: border-box;
				position: relative;
				display: block;
				width: 100%;
				min-height: 190rpx;
				padding: 40rpx 30rpx 0;
				border-radius: 36rpx;
				border: 1px solid #ddd;
				background: #fff;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;

				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: -30rpx;
					width: 690rpx;
					height: 156rpx;
					background: url('@/static/images/other_bg.png') no-repeat;
					background-size: 100% 100%;
					z-index: -1;
				}

				.title {
					margin-bottom: 15rpx;
					font-style: normal;
					font-weight: 700;
					font-size: 40rpx;
					line-height: 47rpx;
					letter-spacing: 1.18rpx;
					color: #000;
					flex: 1;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}

				.tag-box {
					font-style: normal;
					font-weight: 700;
					font-size: 24rpx;
					line-height: 34rpx;
					letter-spacing: 1rpx;
					margin-bottom: 22rpx;
					padding-right: 8rpx;
					margin-right: 20rpx;
					color: #b47528;
					background: rgba(240, 213, 182, .24);
					border-radius: 4rpx;

					.tag-title {
						display: inline-block;
						height: 100%;
						background: linear-gradient(74.33deg, #ffad8d 7%, #ffbf75 86.31%);
						padding: 0 8rpx;
						margin-right: 1rpx;
						border-radius: 4rpx 0 0 4rpx;
						color: #441c02;
					}

					.tag-num {
						margin-left: 8rpx;
					}
				}
			}
		}
	}

	/* 领取海报弹窗 */
	.poster-alert {
		padding: 80rpx 70rpx;
	}

	.poster-alert__content {
		margin-top: 60rpx;
	}

	.poster-alert .btn-show-poster {
		height: 80rpx;
		background-color: #000;
		margin-top: 100rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
	}

	.poster-alert .btn-close-wrapper {
		padding: 30rpx;
		position: absolute;
		bottom: -110rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.poster-alert .btn-close {
		width: 54rpx;
		height: 54rpx;
		border: 1px solid #fff;
		border-radius: 50%;
		text-align: center;
		line-height: 54rpx;
	}

	.poster-alert .btn-close .iconfont {
		color: $uni-text-color-inverse;
		font-size: 30rpx;
	}

	.count-down-class {
		color: $uni-btn-color-disabled;
		font-size: 24rpx;
		line-height: 1;
	}

	.perfect-tips-placeholder {
		height: 100rpx;
	}

	.perfect-tips-container {
		width: 100%;
		height: 100rpx;
		// background: #1c1c1c;
		padding: 0 20rpx;
		// border-bottom: 1px solid #4b4a48;
		border-bottom: 1px solid #eee;
		box-sizing: border-box;
	}

	.perfect-tips .perfect-tips__title text {
		color: #FF4400;
	}

	.perfect-tips .btn-perfect text {
		color: $uni-text-color-active;
	}

	.lottery-user-count {
		padding-left: 20rpx;
		position: relative;
	}

	.lottery-user-count:after {
		width: 1px;
		height: 24rpx;
		background: #878787;
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}
</style>